<template>
	<view class="xsq">
		<view class="shiquDiv">
			<view class="xsqTop uni-flex">
				<view class="townName">长沙市</view>
				<view class="xiala " :class="{upturn:isShowArea==true}" @click="xialaClick()"><image src="../../static/icon/xiala.png"></image> </view>
			</view>
			<view class="quView uni-flex" v-show="isShowArea">
				<view class="areaName" v-for="(areaItem,index) in areaList">{{areaItem}}</view>
			</view>
		</view>
		<view class="xsqTop uni-flex">
			<view class="townName">株洲市</view>
			<view class="xiala"><image src="../../static/icon/xiala.png"></image> </view>
		</view>
		<view class="xsqTop uni-flex">
			<view class="townName">湘潭市</view>
			<view class="xiala"><image src="../../static/icon/xiala.png"></image> </view>
		</view>
		<view class="xsqTop uni-flex">
			<view class="townName">岳阳市</view>
			<view class="xiala"><image src="../../static/icon/xiala.png"></image> </view>
		</view>
	</view>
</template>

<script>
	export default{
		name:"xsq",
		data(){
			return{
				areaList:["天心区","雨花区","长沙县","宁乡市","芙蓉市","岳麓区","开福区","浏阳市","望城区"],
				isShowArea:true
			}
		},
		methods:{
			xialaClick(){
				this.isShowArea = !this.isShowArea;
				
			}
		}
	}
</script>

<style>
	@import "uni.css";
	.xsq{
		width: 100%;
	}
	.xsqTop{
		width: 100%;
		height: 50px;
		line-height: 50px;
		padding: 0 20px;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.townName{
		width: 100px;
		color: #0B121A;
		font-size: 16px;
	}
	.xiala,.xiala image{
		width: 23px;
		height: 17px;
	}
	.xiala image{
		display: block;
	}
	.quView{
		width: 100%;
		padding: 0 20px;
		margin-top: 10px;
		flex-direction: row;
		flex-wrap: wrap;
	}
	.areaName{
		width: 100px;
		height: 34px;
		line-height: 34px;
		text-align: center;
		border: solid #EDEDED 1px;
		color: #28435D;
		font-size: 14px;
		margin-bottom: 10px;
	}
	.areaName:nth-child(3n+2){
		margin: 0 17px;
	}
	.upturn{
		transform: rotateX(180deg);
	}
	.shiquDiv{
		width: 100%;
	}
</style>
